<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios-0.18.0.js"></script>
    <script>
        //文档加载完成
        window.onload=function () {
            //发送ajax请求查询所有数据
            axios({
                method:"get",
                url:"http://localhost:8080/javaweb10/getAll"
            }).then(function (resp) {
                console.log(resp.data);
                //对相应回来的值进行处理 思路：将相应回来的数组遍历出来 一个对象拼接成一个tr 放到table中
                let students =  resp.data;//获取数组

                //定义第一行头部数据
                var tableData="  <tr>\n" +
                    "            <td>编号</td>\n" +
                    "            <td>姓名</td>\n" +
                    "            <td>密码</td>\n" +
                    "            <td>操作</td>\n" +
                    "        </tr>";//定义表格数据

                //遍历集合 每次循环+tr
                for (let i = 0; i < students.length;i++){
                   tableData += " <tr>\n" +
                       "            <td>"+students[i].id+"</td>\n" +
                       "            <td>"+students[i].name+"</td>\n" +
                       "            <td>"+students[i].password+"</td>\n" +
                       "            <td>\n" +
                       "                <a href=\"#\">编辑</a>\n" +
                       "                <a href=\"#\">删除</a>\n" +
                       "            </td>\n" +
                       "        </tr>";
                }

                //将遍历的多个tr数据添加到表格中
                document.querySelector("#mytable").innerHTML=tableData;




            });
        }

    </script>


</head>
<body>
<center>
    <h4>学生列表</h4>
    <a href="6.新增数据测试.html">新增</a>
    <table id="mytable" border="1" width="800px" style="text-align: center">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>密码</td>
            <td>操作</td>
        </tr>

        <tr>
            <td>1</td>
            <td>张三</td>
            <td>123456</td>
            <td>
                <a href="#">编辑</a>
                <a href="#">删除</a>
            </td>
        </tr>

    </table>

</center>
</body>
</html>